<template>
	<view class="uni_paid">
		<view class="uni_paid_value" @click="$refs.paidRefs.open()">{{ checkIndex ? checkIndex + '号' : '' }}</view>
		<uni-popup type="bottom" ref="paidRefs">
			<view class="paid_box">
				<view class="dis_start pt15 pb15 fw700">设置还款日</view>
				<view class="paid dis_wrap">
					<view class="paid_item" v-for="item in formatPaid" :key="item">
						<view class="paid_item_check" :class="{ paid_item_active: checkIndex === item + 1 }" @click="selected(item + 1)">
							<text>{{ item + 1 }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [Number],
				default: 0
			},
			padis: {
				type: Number,
				default: 27
			}
		},
		data() {
			return {
				checkIndex: ''
			}
		},
		created() {
			if(`${this.value}`.length > 0 &&  typeof this.value === 'number') {
				this.checkIndex = this.value
			}
		},
		watch: {
			value(newVal) {
				this.checkIndex = newVal
			}
		},
		computed: {
			formatPaid() {
				return this.padis > 27 ? 27 : this.padis
			}
		},
		methods: {
			selected(index) {
				this.checkIndex = index
				this.$emit('selected', index)
				this.$refs.paidRefs.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni_paid {
		flex: 1;
		height: 35px;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		padding-left: 10px;
		.uni_paid_value {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			color: #b1b1b1;
		}
	}
	.paid_box {
		background-color: #fff;
		padding: 30rpx;
		.paid {
			.paid_item {
				font-size: 30rpx;
				width: 99rpx;
				height: 99rpx;
				padding: 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				.paid_item_check {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					justify-content: center;
				}
				.paid_item_active {
					background-color: #009df0;
					color: #fff;
				}
			}
		}
	}
</style>